<template>
  <div class="location">
    <div>
      <NavBar @left-click-event="goBack" title="城市定位"></NavBar>
      <van-divider />
    </div>
    <!-- 输入框 -->
    <div class="search-container">
      <SearchInput @contentChangeEvent="searchAddress" @do-search-event="searchAddress" placeholder="请输入城市名称">
      </SearchInput>
    </div>
    <!-- 搜索结果 -->
    <ul>
      <li v-for="item in searchAddressList" :key="item.id" @click="goHome(item)">
        {{ item.name }}
      </li>
    </ul>
    <!-- 地图容器 -->
    <div id="map-container" class="map-container padding-lr-20">

    </div>



  </div>
</template>
<script setup>
import NavBar from '@/components/NavBar.vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import SearchInput from '../../../components/SearchInput.vue';
import { useAddressStore } from '@/stores/address.js'
import { checkNullObj } from '../../../utils';
const router = useRouter()
const addressStore = useAddressStore()
const ret = ref({})
const city = ref('')
const searchAddressList = ref([])
var map = null
onMounted(() => {
  map = new AMap.Map('map-container', {
    zoom: 11
  });

  if(!checkNullObj(addressStore.getAddress)){
    addMaker(addressStore.getAddress)
  }
})

const addMaker = (params) => {
  // 创建一个 Marker 实例：
  var marker = new AMap.Marker({
    position: new AMap.LngLat(params.location.lng, params.location.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: params.name
  });
   // label默认蓝框白底左上角显示，样式className为：amap-marker-label
   marker.setLabel({
      direction:'top',
      offset: new AMap.Pixel(0,0),  //设置文本标注偏移量
      content: `<div  class='info' style='border-color:#fff;height:20px;backround-color:#fff'>${ params.name}</div>`, //设置文本标注内容
  });
  map.add(marker)
  map.setCenter([params.location.lng, params.location.lat]); //设置地图中心点
}

const goBack = () => {
  router.go(-1)
}

const goHome = (item) => {
  addressStore.updateAddress(item)
  router.go(-1)
}


const searchAddress = (keyword) => {
  // JSAPI 2.0 输入提示插件名称由 AMap.Autocomplete 变更为 AMap.AutoComplete 啦！
  AMap.plugin('AMap.AutoComplete', function () {
    var autoOptions = {
      //city 限定城市，默认全国
      city: city.value
    };
    // 实例化AutoComplete
    var autoComplete = new AMap.AutoComplete(autoOptions);
    // 根据关键字进行搜索
    autoComplete.search(keyword, function (status, result) {
      // 搜索成功时，result即是对应的匹配数据
      console.log(result);
      // console.log("status====>",status);
      searchAddressList.value = result.tips
    })
  })
}
// 获取城市信息
AMap.plugin('AMap.CitySearch', function () {
  var citySearch = new AMap.CitySearch()
  citySearch.getLocalCity(function (status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // 查询成功，result即为当前所在城市信息
      console.log("result====>", result);
      ret.value = result.bounds.northEast
      city.value = result.city



    }
  })
})
</script>
<style lang="scss" scoped>
.location {
  :deep(.amap-marker-label){
    border-color: #fff;
  }
  :deep(.van-divider) {
    background-color: #fff;
    margin: 0;
  }

  .search-container {
    padding: 36px 20px;
    background-color: #fff;
  }

  .map-container {
    width: 710px;
    height: 342px;
  }
}
</style>